import React, {FC} from 'react';
import "./index.less";
import HxCyCard from "@/components/HxCyCard";
import {ReloadOutlined} from "@ant-design/icons";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {Spin} from "antd";
import {HxArticleNormalItem, HxArticleSimpleItem} from "@/components/HxArticleItem";
import {FormattedMessage, IntlProvider, useAccess} from "@@/exports";

interface GuessLikeProps {
  title: React.ReactNode;
}

/**
 * 猜你喜欢 页面
 */
const GuessLike: FC<GuessLikeProps> = (props) => {
  const {title = "猜你想看"} = props;
  const access = useAccess();

  const dataReq = useRequest((p) => {
    const reqParams = {
      page: 1,
      ...p,
      pageSize: 4,

    };
    if (access.isLogined) {
      return API.queryFrontRecommendArticles(reqParams);  //已登录的用推荐列表接口
    }
    //没推荐的 用最新的文章
    return API.queryFrontArticles({
      ...reqParams,
      periodZ: false,
      hotType: "PUBLICATION_TIME",
    });
  }, {});

  const data = dataReq?.data?.data || [];

  return (
    <div className={"guess-like-container"}>
      <HxCyCard
        title={title}
        subtext={"Recommended"}
        subtextVisiable={false}
        className={"editors-picks-list-card"}
        extra={
          <a className={"cy-card-more-btn"} onClick={(e) => {
            e.preventDefault();
            dataReq.refresh();
          }}><ReloadOutlined/> <FormattedMessage id="text.shuffle"/></a>
        }>
        <Spin spinning={dataReq.loading}>
          {
            dataReq.data?.data?.map((item) => (
              <HxArticleSimpleItem key={item.id} showCover={true} article={item}/>
            ))
          }
        </Spin>
      </HxCyCard>
    </div>
  );
};

export default GuessLike;
